<template>
  <m-win wd="900" v-model:window_open="val.md_up" title="地牢作业投稿">
    <template #content>
      <div>
        <component :is="comp.up" :comp="comp" :set="set" :val="val" />
      </div>
    </template>
    <template #footer>
      <n-button type="gt_y" :size="cfg.sizebtn" @click="val.uprole">提交作业</n-button>
    </template>
  </m-win>

  <m-win wd="900" v-model:window_open="val.md_zy" title="地牢作业预览">
    <template #content>
      <van-overlay :show="val.loading_show">
        <div class="wrapper">
          <div class="ldmain">
            <van-loading vertical>
              <template #icon>
                <van-icon name="star-o" size="30" />
              </template>
              {{ val.loading_text ?? "val.loading_text" }}
            </van-loading>
          </div>
        </div>
      </van-overlay>
      <n-h3 style="margin-bottom: 12px; text-align: center">
        {{ val.view_zy?.ss }}史莱姆 ({{ val.view_zy?.yc }}) {{ val.view_zy?.score }}分 -
        作者{{ val.view_zy?.by }}</n-h3
      >

      <template
        v-if="val.view_zy?.cdr != null || val.view_zy?.fps != null || val.view_zy?.bs"
      >
        <div class="stitle">配置要求</div>
        <div class="_box0">
          <div class="_box2" style="margin-bottom: 0px">
            <div v-if="val.view_zy?.cdr != null">
              主控CD：[ {{ val.view_zy?.cdr }} % ]
            </div>
            <div v-if="val.view_zy?.cdr != null">
              要求锁帧：[ {{ val.view_zy?.fps ?? "未填写" }}帧 ]
            </div>
            <div v-if="val.view_zy?.bs != null">
              倍速要求：[ {{ val.view_zy?.bs ?? "未填写" }} ]
            </div>
          </div>
        </div>
      </template>
      <div class="stitle" v-if="val.view_zy.tipstext != null">说明文本</div>
      <div class="_box0" v-if="val.view_zy.tipstext != null">
        <pre class="_box2">{{ val.view_zy?.tipstext }}</pre>
      </div>
      <div class="_box0">
        <div class="_box2" v-if="val.view_zy?.video">
          <a :href="val.view_zy.video" target="_blank"
            >视频地址：{{ val.view_zy?.video }}</a
          >
        </div>
        <div class="_box2" v-if="val.view_zy?.fcimg">
          <img :src="set.toimg(val.view_zy.fcimg)" style="width: 100%; margin: 0 auto" />
        </div>
        <div class="_box2" v-if="val.view_zy?.itimg">
          <img :src="set.toimg(val.view_zy.itimg)" style="width: 100%; margin: 0 auto" />
        </div>
      </div>
    </template>
    <template #footer>
      <n-button
        type="gt_y"
        :size="$cfg.sizebtn"
        v-if="cfg.qxpd(['bz']) == true || val?.view_zy?.uid === cfg.user?.uid"
        @click="val.upd_score_wd(val?.view_zy?._id?.['$oid'])"
        >修改数据/分数</n-button
      >
      <n-button
        type="gt_n"
        :size="$cfg.sizebtn"
        v-if="cfg.qxpd(['bz']) == true || val?.view_zy?.uid === cfg.user?.uid"
        @click="set.del_zy(val?.view_zy?._id, val?.view_zy)"
        >删除作业</n-button
      >
    </template>
  </m-win>

  <m-win wd="900" v-model:window_open="val.md_upd_score" title="更新作业分数">
    <template #content>
      <van-overlay :show="val.loading_show">
        <div class="wrapper">
          <div class="ldmain">
            <van-loading vertical>
              <template #icon>
                <van-icon name="star-o" size="30" />
              </template>
              {{ val.loading_text }}
            </van-loading>
          </div>
        </div>
      </van-overlay>

      <div class="_box0">
        <n-grid
          x-gap="8"
          y-gap="8"
          :cols="parseInt(cfg.sswd / 350) >= 2 ? 2 : parseInt(cfg.sswd / 350)"
        >
          <n-gi span="1">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">
                <div>结算分数：</div>
              </div>
              <div class="_2_val">
                <n-input-number
                  clearable
                  v-model:value="val.new_score"
                  placeholder="请输入本次分数"
                />
              </div>
            </div>
          </n-gi>
          <n-gi span="1">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">
                <div>主控CD%：</div>
              </div>
              <div class="_2_val">
                <n-input-number
                  clearable
                  v-model:value="val.new_cdr"
                  placeholder="特殊CD%"
                />
              </div>
            </div>
          </n-gi>
          <n-gi span="1">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">
                <div>要求帧数：</div>
              </div>
              <div class="_2_val">
                <n-input-number
                  clearable
                  v-model:value="val.new_fps"
                  placeholder="请输入帧数要求，留空不限制"
                />
              </div>
            </div>
          </n-gi>
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 85px">
                <div>倍速要求：</div>
              </div>
              <div class="_2_val">
                <div class="_3_div">
                  <n-flex class="tyflex">
                    <template v-for="item in val.bslist">
                      <n-button
                        size="small"
                        @click="val.new_bs = item"
                        :type="val.new_bs == item ? 'gt_btn_act' : 'gt_btn'"
                        ><img
                          height="13"
                          class="team_ss_icon"
                          style="margin-right: 5px"
                          :src="val.img[item]"
                        />{{ item }}</n-button
                      >
                    </template>
                  </n-flex>
                </div>
              </div>
            </div>
          </n-gi>
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 100px">
                <div>分数图片：</div>
                <div class="_2_tips" v-if="val.fc_obj.uploading == false">
                  提交编辑后生效
                </div>
                <div class="_2_tips" v-if="val.fc_obj.uploading == true">
                  上传中 {{ val.fc_obj.pt }}%
                </div>
              </div>
              <div class="_2_val">
                <n-upload
                  directory-dnd
                  list-type="image-card"
                  :action="`${cfg.api}upload`"
                  :data="{ ...cfg.user }"
                  :max="1"
                  response-type="json"
                  @change="
                    ({ file, fileList, event }) =>
                      set.updimg_change({ file, fileList, event, obj: val.fc_obj })
                  "
                  @finish="
                    ({ file, event }) =>
                      cfg.updfinish({
                        file,
                        event,
                        run: set.updimg_fen,
                      })
                  "
                >
                </n-upload>
              </div>
            </div>
          </n-gi>
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 100px">
                <div>装备图片：</div>
                <div class="_2_tips" v-if="val.it_obj.uploading == false">
                  提交编辑后生效
                </div>
                <div class="_2_tips" v-if="val.it_obj.uploading == true">
                  上传中 {{ val.it_obj.pt }}%
                </div>
              </div>
              <div class="_2_val">
                <n-upload
                  directory-dnd
                  list-type="image-card"
                  :action="`${cfg.api}upload`"
                  :data="{ ...cfg.user }"
                  :max="1"
                  response-type="json"
                  @change="
                    ({ file, fileList, event }) =>
                      set.updimg_change({ file, fileList, event, obj: val.it_obj })
                  "
                  @finish="
                    ({ file, event }) =>
                      cfg.updfinish({
                        file,
                        event,
                        run: set.updimg_zb,
                      })
                  "
                >
                </n-upload>
              </div>
            </div>
          </n-gi>
          <n-gi span="2">
            <div class="_banr">
              <div class="_2_title2" style="width: 100px">
                <div>说明文本：</div>
              </div>
              <div class="_2_val">
                <n-input
                  type="textarea"
                  :size="cfg.sizebtn"
                  style="min-height: 150px"
                  v-model:value="val.new_tipstext"
                  placeholder="请填写作业说明内容：比如主控CD要多少 防御要求
                              "
                ></n-input>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </div>
    </template>
    <template #footer>
      <n-button
        type="gt_y"
        :size="$cfg.sizebtn"
        @click="val.upd_score(val.view_zy, val.new_score)"
        >提交分数</n-button
      >
    </template>
  </m-win>

  <!-- 本体 -->
  <div class="_mbbox ngap">
    <div class="nbox1">
      <div class="_pcmw _topbtn_box mauto">
        <n-button type="gt_y" @click="val.upup()">提交作业</n-button>
      </div>

      <div class="_pcmw mauto">
        <div class="_dljjc_main">
          <template v-for="item in val.sslist">
            <div
              class="_dljjc_box"
              :class="{ _dljjc_box_on: val.click.ss?.includes(item) }"
              @click="val.click.ss = item"
            >
              <img height="15" class="team_ss_icon" :src="val.img[item]" />
              <div class="slmimg">
                <img style="height: 100%; z-index: 99" :src="set.bossimg[item]" />
              </div>
            </div>
          </template>
        </div>
        <div class="_dljjc_btn_main">
          <template v-for="item in val.yclist">
            <div
              :class="{ dljjc_btn_box_on: val.click.yc?.includes(item) }"
              class="dljjc_btn_box"
              @click="val.click.yc = item"
            >
              <img
                height="25"
                class="dljjcycyc"
                :class="`dljjcyc_${item}`"
                :src="val.img[item]"
              />
              弱{{ item }}
            </div>
          </template>
        </div>
      </div>

      <div style="gap: 8px" class="gapdef _teamdiv">
        <template v-for="(item, key) in val.data_list">
          <div class="dljjc_zy" v-if="item?.data?.length >= 1">
            <div class="score_gap">
              <div class="_score_box">
                <img :src="val.img.img_dljjc" /><span class="_score_text">{{
                  item.max_score
                }}</span>
              </div>
              <div class="avagap">
                <template v-for="item2 in item.icon">
                  <img class="ava" :src="cfg.function.ava(item2, 70)" />
                </template>
              </div>
            </div>
            <div style="display: flex; gap: 0.55em; flex-direction: row; flex-wrap: wrap">
              <template v-for="(item2, key2) in item.data">
                <div class="work_workdiv2" @click="val.openzy(item2, key, key2)">
                  <div class="_zybox">{{ item2.by }} {{ item2.score }}</div>
                </div>
              </template>
            </div>
          </div></template
        >
      </div>
    </div>
  </div>
</template>
<style scoped>
.slmimg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
._pcmw {
  max-width: 650px;
}
._score_box {
  background-color: #5a6576;
  display: flex;
  padding: 0.5em;
  border-radius: 0.35em;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  border: solid 1px #585757;
}
.score_gap {
  display: flex;
  gap: 0.75em;
  justify-content: center;
  align-items: center;
}
.dljjc_zy {
  padding: 0.6rem 0.5rem 0.6rem 0.5rem;
  border-radius: 0.35em;
  position: relative;
  background-color: var(--nbox2-bg);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75em;
  align-items: center;
}

.dljjc_btn_box_on {
  background-color: #6d788b !important;
  color: #fff !important;
}
._dljjc_btn_main {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 0.75em;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  margin-top: 1.25em;
}

.dljjc_btn_box {
  cursor: pointer;
  display: flex;
  padding-top: 0.35em;
  padding-bottom: 0.35em;
  border-radius: 0.25em;
  position: relative;
  justify-content: center;
  background: var(--bg5);
  transition: 0.2s ease-in-out;
  align-items: center;
  gap: 0.75em;
}

._dljjc_box_main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 0.4em;
  flex-direction: row;
  flex-wrap: wrap;
}

._dljjc_box_on {
  background: var(--tag-onbg) !important;
  border: var(--nbox4-border3) !important;
  box-shadow: var(--nbox4-shadow) !important;
}
._dljjc_box {
  cursor: pointer;
  display: flex;
  height: 5.5em;
  position: relative;
  border-radius: 3px;
  background: var(--bg5);
  justify-content: center;
  transition: all 0.2s ease-in-out;
}
._score_box img {
  width: 22px;
}
._dljjc_main {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 0.75em;
  grid-template-columns: repeat(7, minmax(0px, 1fr));
}

._dljjc_box .team_ss_icon {
  position: absolute;
  bottom: -9px;
  z-index: 500;
  background-color: #000;
  padding: 0.25em;
  border-radius: 999px;
  box-shadow: 0 0 3px #fff;
}

.window_text {
  background-color: #454952;
  text-align: center;
  border-radius: 4px;
  color: #f2c97d;
}
.zy_list_small {
  display: flex;
  gap: 10px;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  padding-top: 2px;
  padding-bottom: 6px;
  flex-wrap: wrap;
}
.avagap {
  display: flex;
  gap: 0.65em;
}

@media (max-width: 650px) {
  ._dljjc_box {
    height: 4.5em;
  }
  .mauto {
    margin: unset;
  }
  .dljjc_zy {
    flex-direction: column;
  }
}
@media (max-width: 500px) {
  .dljjc_btn_box img {
    height: 20px;
  }
  ._dljjc_main {
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }
  .dljjc_btn_box {
    font-size: 0.9em;
  }
  ._dljjc_box:last-child {
    grid-column: span 2;
  }

  ._dljjc_box {
    height: 4em;
  }
}

@media (max-width: 350px) {
  ._dljjc_box {
    height: 3.5em;
  }
  .dljjc_btn_box img {
    height: 1.6em;
  }
  ._dljjc_main {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }
  ._dljjc_box:last-child {
    grid-column: span 3;
  }
  .dljjc_btn_box {
    font-size: 0.85em;
  }
}

@media (max-width: 428px) {
  ._dljjc_box {
    height: var(--def-4em);
  }
  ._dljjc_main,
  ._dljjc_btn_main {
    gap: var(--def-05em);
  }
  .dljjc_btn_box {
    font-size: var(--def-12px);
  }
  .dljjc_zy .ava {
    width: var(--def-rolepx);
    height: var(--def-rolepx);
  }
  .avagap {
    gap: 2vw;
  }
  .score_gap {
    gap: 2vw;
  }
  .dljjc_zy ._score_text {
    font-size: var(--def-16px);
  }

  .dljjc_zy {
    padding: 3vw;
  }
  ._topbtn_box {
    display: grid;
    grid-template-columns: repeat(1, minmax(0px, 1fr));
  }
  ._score_box img {
    width: 6vw;
  }
}
</style>
<script>
import img_fire from "@/assets/img/火属性.png";
import img_water from "@/assets/img/水属性.png";
import img_land from "@/assets/img/土属性.png";
import img_light from "@/assets/img/光属性.png";
import img_dark from "@/assets/img/暗属性.png";
import img_void from "@/assets/img/虚属性.png";
import img_repel from "@/assets/img/battle/jifei.png";
import img_yuzhou from "@/assets/img/battle/ic_yuzhou.png";
import img_down from "@/assets/img/battle/jidao.png";
import img_hurt from "@/assets/img/battle/zhongshang.png";
import img_atk from "@/assets/img/战士.png";

import img_boss_火 from "@/assets/img/boss/boss_lava_slime_king.png";
import img_boss_暗 from "@/assets/img/boss/punchking_boss_slime.darkness.png";
import img_boss_土 from "@/assets/img/boss/punchking_boss_slime.earth.png";
import img_boss_水 from "@/assets/img/boss/punchking_boss_slime.ice.png";
import img_boss_光 from "@/assets/img/boss/punchking_boss_slime.light.png";
import img_boss_虚 from "@/assets/img/boss/punchking_boss_slime.none.png";
import img_boss_宇宙 from "@/assets/img/boss/punchking_boss_slime.super.png";

import img_dljjc from "@/assets/img/dljjc.png";
import { cfg } from "@/cfg/cfg.js";
import gt_model from "@/comp/gt_modal.vue";
import new_model from "@/comp/new_modal.vue";

export default defineComponent({
  props: {
    load: {
      type: Boolean,
      required: false,
    },
  },
  emits: ["update_load"],
  setup(props, { emit }) {
    const comp = {
      up: defineAsyncComponent(() => import(`./comp/dljjc_up.vue`)),
    };

    const set = {
      //上传状态
      updimg_change: ({ file, fileList, event, obj }) => {
        try {
          if (file.status == "uploading") {
            obj.uploading = true;
            obj.pt = file.percentage;
          } else {
            obj.uploading = false;
            obj.pt = file.percentage;
          }
        } catch (error) {
          cfg.alert3({
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      //新旧图片转换
      toimg: (url) => {
        //url包含字符串open.ww2
        if (url.includes("open.ww2")) {
          return `${url}@w850.webp`;
        } else {
          return url;
        }
      },
      updimg_fen: (file, data) => {
        try {
          file.url = data.file;
          file._id = data.id;

          val.new_img1 = data.id;
          return file;
        } catch (error) {
          cfg.alert3({
            title: "fen ERROR",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      updimg_zb: (file, data) => {
        try {
          file.url = data.file;
          file._id = data.id;
          val.new_img2 = data.id;
          return file;
        } catch (error) {
          cfg.alert3({
            title: "zb ERROR",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      bossimg: {
        火: img_boss_火,
        暗: img_boss_暗,
        土: img_boss_土,
        水: img_boss_水,
        光: img_boss_光,
        虚: img_boss_虚,
        宇宙史: img_boss_宇宙,
      },
      get_svinfo: async (tf) => {
        try {
          //获取unix时间戳
          const ut2 = Math.floor(Date.now() / 1000);
          //5分钟内不更新
          if (ut2 - val.unixtime >= 300 || val.unixtime == null || tf == true) {
            val.unixtime = ut2;
          } else {
            return;
          }
          const back = await cfg.mget({
            url: `${cfg.url2}api/dljjc`,
            query: {
              type: "get_count",
            },
          });
          if (back.code == 0) {
            const d = back.data;
            val.svd = `${d.count}_${d.time}`;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "svinfo ERROR",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
      //删除作业
      del_zy: async (id) => {
        val.loading_show = true;
        val.loading_text = "处理中...";
        try {
          const back = await cfg.mget({
            url: `${cfg.url2}api/dljjc`,
            query: {
              type: "del_zy",
              id: id,
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
            },
          });

          if (back.code == 0) {
            await set.get_svinfo(true);
            val.data_list[val.view_zy.k1].data.splice(val.view_zy.k2, 1);
            val.loading_show = false;
            val.md_zy = false;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading_show = false;
          cfg.alert3({
            title: "del_zy ERROR",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
    };

    let val = reactive({
      unixtime: null,
      upup: () => {
        val.up_click = {};
        val.md_up = true;
      },
      grid: {
        left: "24 400:6 600:5",
        right: "24 400:18 600:19",
      },
      bslist: ["无要求", "1倍速", "2倍速", "3倍速"],
      view_zy: {},
      new_img1: null,
      new_img2: null,
      fc_obj: {},
      it_obj: {},
      svd: null,
      md_zy: false,
      data_list: [],
      // 打开更新分数窗口
      upd_score_wd: (id) => {
        val.md_upd_score = true;
        val.new_tipstext = val?.view_zy?.tipstext ?? null;
        val.new_cdr = val?.view_zy?.cdr ?? null;
        val.new_by = val?.view_zy?.by;
        val.new_score = val?.view_zy?.score;
        val.new_img1 = null;
        val.new_img2 = null;
        val.new_fps = val?.view_zy?.fps ?? null;
        val.new_bs = val?.view_zy?.bs ?? "无要求";
        return;
      },
      // 更新分数
      upd_score: async (data) => {
        try {
          val.loading_show = true;
          val.loading_text = "处理中...";

          if (val.it_obj.uploading == true) {
            throw { code: -1, message: "请等待装备图片上传" };
          }

          if (val.fc_obj.uploading == true) {
            throw { code: -1, message: "请等待分数图片上传" };
          }

          const score = val.new_score;
          const tipstext = val.new_tipstext ?? null;
          const fps = val.new_fps;
          const bs = val.new_bs;
          const id = data?._id;

          const back = await cfg.mget({
            url: `${cfg.url2}api/dljjc`,
            query: {
              type: "edit_zy",
              id: id,
              id,
              img1: val.new_img1,
              img2: val.new_img2,
              cdr: val.new_cdr ?? null,
              by: val.new_by,
              tipstext,
              score,
              fps,
              bs,
              user: {
                uid: cfg.user?.uid,
                authkey: cfg.user?.authkey,
                token: cfg.user?.token,
              },
            },
          });

          if (back.code == 0) {
            val.loading_show = false;
            val.md_upd_score = false;
            val.md_zy = false;
            await set.get_svinfo(true);
            val.get_work_list();
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          val.loading_show = false;
          cfg.alert3({
            title: "编辑作业失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },

      openzy: (item, k1, k2) => {
        val.view_zy = item;
        val.view_zy.k1 = k1;
        val.view_zy.k2 = k2;
        val.md_zy = true;
      },
      md_up: false,
      img: {
        img_dljjc,
        击倒: img_down,
        重伤: img_hurt,
        击飞: img_repel,
        火: img_fire,
        水: img_water,
        土: img_land,
        光: img_light,
        暗: img_dark,
        虚: img_void,
        宇宙史: img_yuzhou,
        通用: img_atk,
      },
      sslist: ["虚", "光", "暗", "火", "水", "土", "宇宙史"],
      yclist: ["击飞", "重伤", "击倒"],
      click: {
        ver: "beta3",
        ss: null,
      },
      up_click: {},
      get_work_list: async () => {
        try {
          if (val.click.ss == null) {
            return;
          }

          const back = await cfg.mget({
            url: `${cfg.url2}api/dljjc`,
            query: {
              type: "get_list",
              ss: val.click.ss,
              yc: val.click.yc,
              d: val.svd,
              re: 2314,
            },
          });

          if (back.code == 0) {
            const data = back.data;
            let newdata = {};
            //forEach遍历数据
            data.forEach((item) => {
              //将item.role数组转字符串
              const join_role = item.role.join(",");
              if (newdata[join_role] == null) {
                newdata[join_role] = {
                  data: [],
                  icon: item.role,
                  max_score: 0,
                  count: 0,
                };
              }
              newdata[join_role].count++;
              if (item.score > newdata[join_role].max_score) {
                newdata[join_role].max_score = item.score;
              }
              newdata[join_role].data.push(item);
            });

            //obj转数组
            newdata = Object.values(newdata);
            //相同刀型根据最高分数排序
            newdata.sort((a, b) => {
              return b.max_score - a.max_score;
            });
            //计算刀型内数据 按照分数排序
            newdata.forEach((item) => {
              item.data.sort((a, b) => {
                return b.score - a.score;
              });
            });
            val.data_list = newdata;
          } else {
            throw { code: -1, message: back.msg };
          }
        } catch (error) {
          cfg.alert3({
            title: "获取作业失败",
            message: `${error.message}`,
            closeOnClickOverlay: true,
          });
        }
      },
    });

    //监听val.click变化
    watch(
      () => val.click,
      async (newValue, oldValue) => {
        if (newValue.yc != null && newValue.ss != null && newValue.ver != null) {
          await set.get_svinfo();
          val.get_work_list();
        }
      },
      { deep: true }
    );

    onMounted(async () => {
      await set.get_svinfo();
      emit("update_load", false);
    });

    return {
      val,
      comp,
      set,
      cfg,
      new_model,
      gt_model,
    };
  },
});
</script>
